<!--navbar-->
<div class="navbar">
    <div class="navbar-inner white-navbar" style="background-color: #ffffff">
        <div class="left">
            <a href="#" class="back link icon-only">
                <i class="f7-icons size-16">left</i>
            </a>
        </div>
        <div class="center">我的订单</div>
        <div class="right"></div>
    </div>
</div>
<!-- Page, data-page contains page name-->
<div data-page="page.center.myOrder.index" class="page navbar-through no-toolbar">
    <div class="page-content center-scroll">
        <!--选项卡-->
        <div class="walletPassword-tab">
            <div class="tab-title row no-gutter">
                <!-- Link to 购买的作品, active -->
                <a href="#tab-bought-production" class="tab-link col-50 active">
                    <p>购买的作品</p>
                </a>
                <a href="#tab-bought-services" class="tab-link col-50">
                    <p>购买的服务</p>
                </a>
            </div>
            <div class="tabs">
                <!-- 购买的作品, active by default -->
                <div id="tab-bought-production" class="tab active">
                    <div class="panel-box">
                        <div class="white-order-box row no-gutter">
                            <div class="row my-order-row">
                                <a href="#" class="order-item col-25">
                                    <div class="icon icon-paid"></div>
                                    <span class="label-order-item">已付款</span>
                                </a>
                                <a href="#" class="order-item col-25">
                                    <div class="icon icon-buy-complate"></div>
                                    <span class="label-order-item">已完成</span>
                                </a>
                                <a href="#" class="order-item col-25">
                                    <div class="icon icon-others"></div>
                                    <span class="label-order-item">其他</span>
                                </a>
                                <a href="#" class="hidden order-item col-25">
                                    <div class="icon"></div>
                                    <span class="label-order-item">&nbsp;</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-bought-services" class="tab">
                    <div class="panel-box">
                        <div class="white-order-box row no-gutter">
                            <div class="row my-order-row">
                                <a href="#" class="order-item col-25">
                                    <div class="icon icon-pending"></div>
                                    <span class="label-order-item">待处理</span>
                                </a>
                                <a href="#" class="order-item col-25">
                                    <div class="icon icon-working"></div>
                                    <span class="label-order-item">工作中</span>
                                </a>
                                <a href="#" class="order-item col-25">
                                    <div class="icon icon-buy-complate"></div>
                                    <span class="label-order-item">已完成</span>
                                </a>
                                <a href="#" class="order-item col-25">
                                    <div class="icon icon-others"></div>
                                    <span class="label-order-item">其他</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>